<template>
  <view class="content">
    <div v-for="(from,index) in inFormData" :key="index">
      <zhaoxin-formList
              :formArr="formArr"
              :ref="`formRef${index}`"
              :formObj="inFormData[index]"
              :config="config"
      >
      </zhaoxin-formList>
      <div class="buttons" :style="[buttonStyle]">
        <view
                v-for="(button,i) in buttons"
                :key="i"
        >
          <view
                  v-if="button.type==='add'&&!disabled&&inFormData&&inFormData.length<max"
                  @click="addItem(index,button)"
                  :class="[button.class,button.type]"
                  :style="[button.style]"
          >{{button.text||'加'}}</view>
          <view
                  v-if="button.type==='reduce'&&!disabled&&inFormData&&inFormData.length>min"
                  @click="reduceItem(index,button)"
                  :class="[button.class,button.type]"
                  :style="[button.style]"
          >{{button.text||'减'}}</view>
        </view>
      </div>
    </div>
  </view>
</template>

<script>
  export default {
    props:{
      buttonStyle: {
        default: () => {}
      },
      // 按钮组
      buttons:{
        default: () => [
          {
            type:'reduce',
            text:'-',
            style:{},
            class:''
          },
          {
            type:'add',
            text:'+',
            style:{},
            class:''
          },

        ]
      },
      // 禁用
      disabled:{
        default: () => false
      },
      // 最多个数
      max:{
        default: () => 100
      },
      // 最少个数
      min:{
        default: () => 1
      },
      // 表单配置
      config:{
        default: () =>  null
      },
      // 数据组
      formData:{
        default: () => []
      },
      // 项目组
      formArr:{
        default: () => []
      },
    },
  data() {
    return {
      inFormData:[]
    }
  },
  onLoad() {
  },
  methods: {
    addItem(index,button){
      this.inFormData.splice(index+1,0,{})
      this.$emit('itemChange',{...button,index,num:this.inFormData.length})
    },
    reduceItem(index,button){
      if ( this.inFormData.length>1) {
        this.inFormData.splice(index,1)
        this.$emit('itemChange',{...button,index,num:this.inFormData.length})
      }else{
        uni.showToast({
          title: '最少留一个',
          icon: 'none',
          duration: 2000
        })
      }
    },
    submit(){
      let value=[]
      this.inFormData.map((item,index)=>{
        if (this.$refs[`formRef${index}`][0].checkForm()) {
          value.push(this.$refs[`formRef${index}`][0].checkForm())
        }
      })
      return {
        value,
        valid:this.inFormData.length===value.length
      }
    }
  },
    watch:{
      formData:{
        handler(val,oldVal) {
          if (val!=oldVal) {
            this.inFormData=[...val]
          }
        },
        immediate: true,
        deep: true
      },

    }
}
</script>

<style lang="scss" scoped>
  .buttons{
    display: flex;
    flex-direction:row-reverse;
    margin-top: 10rpx;
  }
.add,.reduce{
  width: 36rpx;
  line-height: 36rpx;
  border-radius: 36rpx;
  margin-left: 10rpx;
  color: #fff;
  font-size: 20rpx;
  text-align: center;
}
  .add{
    background: #2b2b8e;
  }
  .reduce{
    background: #99444d;
  }
</style>

